<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <title>05_一个重要的内置关系</title>
</head>
<body>
    
    <!-- 
            1.一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
            2.为什么要有这个关系：让组件实例对象（vc）可用访问到 Vue 原型上的属性、方法。

            彼暗解读：
                类似与Java中继承关系，Vue 继承了prototype ，VueComponent 也继承了 prototype，
                所以用 Vue.prototype.x = 10 , 给原型中添加x属性，VueComponent也能访问到x的值。
                但是 VueComponent 并没有继承 prototype 中的 el 函数项。

     -->


    <!-- 容器 -->
    <div id="root">
        <school></school>
    </div>

    <script type="text/javascript">
       Vue.config.productionTip=false; // 阻止 vue 在启动时生成生产提示。

        
       // 在Vue原型链中定义x属性
       Vue.prototype.x = 100;

        // 定义组件
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学学校名称{{name}}</h2>  
                    <button @click='getX'>单击获取x的值</button>
                </div>
            `,
            data(){
                return {
                    name:'北京大学',
                }
            },
            methods:{
                getX(){
                    // 当前VueComponent实例（组件实例）中找不到时，会往原型链一直往上找，直到Object原型链尽头，没有则返回 undefined
                    console.log('@ x的值',this.x);
                }
            }
        })

       new Vue({
            el:'#root',
            data:{
                
            },
            // 注册组件
            components:{
                school,
            }
        })
 
       
    </script>
</body>
</html>